<template>
  <div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="姓名" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="民族" prop="nation">
        <el-input v-model="ruleForm.nation"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="ruleForm.mobile"></el-input>
      </el-form-item>
      <el-form-item label="身份证号" prop="idCard">
        <el-input v-model="ruleForm.idCard"></el-input>
      </el-form-item>
      <el-form-item label="出生日期" prop="birthday">
        <el-date-picker
          v-model="ruleForm.birthday"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select v-model="ruleForm.sex" placeholder="请选择性别">
          <el-option label="男" value="0"></el-option>
          <el-option label="女" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="籍贯" prop="nativePlace">
        <el-input v-model="ruleForm.nativePlace"></el-input>
      </el-form-item>
      <el-form-item label="现住址" prop="address">
        <el-input v-model="ruleForm.address"></el-input>
      </el-form-item>
      <el-form-item label="与户主关系" prop="relation">
        <el-input v-model="ruleForm.relation"></el-input>
      </el-form-item>
      <el-form-item label="是否本地新增">
        <el-radio v-model="isMoveIn" label="1">本地新增</el-radio>
        <el-radio v-model="isMoveIn" label="2">外地迁入</el-radio>
      </el-form-item>
      <el-form-item v-if="isMoveIn == '2'" label="迁入地" prop="moveInAddress">
        <el-input v-model="ruleForm.moveInAddress"></el-input>
      </el-form-item>
      <el-form-item label="备注信息" prop="remark">
        <el-input type="textarea" rows="3" v-model="ruleForm.remark"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >提交</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { storage } from "../../utils/storage";
import { utils } from "../../utils/common.js";
export default {
  data() {
    return {
      isMoveIn: "1",
      ruleForm: {
        // userId: 1,
        name: "",
        // pwd: '123456',
        mobile: "",
        birthday: "",
        sex: "",
        nation: "",
        relation: "",
        // houseId: 1,
        // householder: '张泰然',
        idCard: "",
        nativePlace: "",
        address: "",
        moveInAdress: "",
        // moveIn: '',
        // moveOut: '',
        // community: '0',
        // created: '1993-05-22 16:12',
        // personType: '0',
        remark: ""
      },
      rules: {
        name: [{ required: true, message: "请输入用户姓名", trigger: "blur" }],
        nation: [{ required: true, message: "请输入民族", trigger: "blur" }],
        mobile: [
          { required: true, message: "请输入用户电话", trigger: "blur" }
        ],
        birthday: [
          { required: true, message: "请选择出生日期", trigger: "change" }
        ],
        idCard: [
          { required: true, message: "请输入身份证号", trigger: "blur" }
        ],
        nativePlace: [
          { required: true, message: "请输入籍贯", trigger: "blur" }
        ],
        address: [{ required: true, message: "请输入现住址", trigger: "blur" }],
        moveInAddress: [
          { required: true, message: "请输入迁入地", trigger: "blur" }
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        relation: [
          { required: true, message: "请输入与户主关系", trigger: "blur" }
        ]
      },
      houseList: storage.getStorage("house"),
      personList: storage.getStorage("person"),
      houseId: null
      // householder: null
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          for (
            var i = 0, householder, community;
            i < this.houseList.length;
            i++
          ) {
            if (this.houseList[i].houseId == this.houseId) {
              householder = this.houseList[i].name;
              community = this.houseList[i].community;
            }
          }
          this.ruleForm.userId =
            this.personList[this.personList.length - 1].userId + 1;
          this.ruleForm.pwd = "123456";
          this.ruleForm.houseId = this.houseId;
          this.ruleForm.householder = householder;
          this.ruleForm.community = community;
          this.ruleForm.moveIn = "";
          this.ruleForm.moveOut = "";
          this.ruleForm.created = utils.formatDate(new Date().getTime());
          this.ruleForm.personType = "0";
          if (this.isMoveIn == 2) {
            //迁入
            this.ruleForm.personType = "2";
            this.ruleForm.moveIn = utils.formatDate(new Date().getTime());
          }
          this.personList.push(this.ruleForm);
          storage.setStorage("person", this.personList);
          setTimeout(() => {
            this.$message.success("成员添加成功！");
            this.$router.go("-1");
          }, 500);
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  mounted() {
    // this.householder = this.$route.params.householder;
    this.houseId = this.$route.params.houseId;
  }
};
</script>

<style scoped>
.el-input {
  width: 200px;
}
.el-textarea {
  width: 400px;
}
</style>
